<template lang="html">
  <div class="billDetail">
    <p class="billTit">
      <span>{{billDetail.billTitle}}</span>
      <em>{{billState}}</em>
    </p>
    <ul class="billList">
      <li>
        <span>房屋地址：</span>
        <div class="">
          <span>{{billDetail.contractTitle}}</span>
        </div>
      </li>
      <!-- <li>
        <span>日期：</span>
        <span>{{rentDate}}</span>
      </li> -->
      <!-- <li>
        <span>账单编号：</span>
        <span>{{billDetail.billNo}}</span>
      </li> -->
      <li v-for="detail in detailList" :key="detail.key">
        <span v-if="detail.type==1">房屋租金：</span>
        <span v-else>{{detail.subject}}：</span>
        <div class="" v-if="detail.type==2">
          <span>{{(detail.rentMoney/100).toFixed(2)}}元</span>
        </div>
        <div class="" v-else>
          <span v-if="billDetail.rentType==1">{{(detail.rentMoney/100).toFixed(2)}}元/月*{{monthNum}}</span>
          <span v-if="billDetail.rentType==2">{{(detail.rentMoney/100).toFixed(2)}}元/晚*{{monthNum}}</span>
        </div>
      </li>
      <!-- 退租补差账单不显示账单日期  billType =2 -->
      <li v-if="billDetail.billType!=2">
        <span>账单日期</span>
        <span>{{rentDate}}</span>
      </li>
      <li>
        <span>总计</span>
        <span>{{billDetail.billMoney/100}}元</span>
      </li>
    </ul>

    <div class="fixedBottom p10">
      <button type="button" name="button" class="blockBtn" @click="payBtn">支付账单</button>
    </div>

    <comfirm
    :comfirmTitle="comfirmTitle"
    v-if="isWrong"
    @comfirmEvent="comfirmEvent"></comfirm>
    <mt-popup
      v-model="popupVisible"
      position="bottom" style="width:100%;">
      <payforBill
      :billMoney="billDetail.billMoney"
      :billId="billDetail.billId"
      :seq="billDetail.seq"
      :contractId="contractId"
      @closePayfor="closePayfor"></payforBill>
    </mt-popup>
  </div>
</template>

<script type="text/javascript" src="./billDetail.js"></script>

<style lang="scss" scoped src="./billDetail.scss"></style>
